<!--
* @description 巡检个人排名卡片
* @author zywu
* @date 2021/03/19 15:54:03
!-->
<template>
  <div class="inspect-man" :class="{ 'is-active':active,'is-myself':myself }">
    <div class="inspect-man__head d-flex ai-center">
      <img src="../../assets/img/common/avatar.png" />
      <span class="inspect-man__name ell">{{dataObj.name}}</span>
    </div>
    <div class="inspect-man__info">完成任务</div>
    <div class="inspect-man__num complete">{{dataObj.checkNum}}</div>
    <div class="inspect-man__info">发现不合格点位</div>
    <div class="inspect-man__num notOk">{{dataObj.isNotPointTaskNum}}</div>
    <span v-if="myself" class="myself d-flex ai-center jc-center">我</span>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  props: {
    active: Boolean,
    dataObj: Object,
  },
  data() {
    return {}
  },

  computed: {
    ...mapState(['userInfo']),
    myself() {
      return this.userInfo.accountName == this.dataObj.account
    },
  },

  created() {},

  mounted() {},

  methods: {},
}
</script>
<style lang='scss'>
.inspect-man {
  position: relative;
  display: inline-block;
  margin-left: 15px;
  padding: 13px 18px;
  width: 160px;
  height: 160px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0px 2px 20px 2px rgba(181, 200, 206, 0.5);
  box-sizing: border-box;
  font-size: 14px;
  &.is-myself {
    background: #f4f9f4;
  }
  &.is-active {
    background: linear-gradient(#3592ff 0%, #1778e7 100%);
    .inspect-man__head,
    .inspect-man__info,
    .inspect-man__num {
      color: #fff;
    }
  }
  &__head {
    img {
      margin-right: 14px;
      width: 30px;
      height: 30px;
      border-radius: 15px;
    }
    color: #333;
  }
  &__name {
    flex: 1;
  }
  &__info {
    padding: 10px 0 2px;
    color: #999;
  }
  .complete {
    color: #47cfad;
  }
  .notOk {
    color: #f02020;
  }
  .myself {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 20px;
    background: linear-gradient(#1778e7 0%, #3592ff 100%);
    border-radius: 10px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 0;
    color: #fff;
    font-size: 10px;
  }
}
</style>